<template>
  <el-aside width="180px" style="position: fixed;left: 0;height: 95%;background: rgb(232, 253, 253);">
    <el-menu
      background-color=" rgb(232, 253, 253)"
      text-color=" rgba(1, 12, 15, 0.993)"
    >
      <el-submenu
        v-for="(item, i) in menuList"
        :key="i"
        :index="item.index"
        class="nav-title"
      >
        <template slot="title">
          <i :class="item.icon"></i>
          {{ item.menuName }}
        </template>
        <el-menu-item
          v-for="val in item.childrenMenus"
          :key="val.menuName"
          :index="val.index"
        >
          <router-link :to="{ path: val.path }">{{
            val.menuName
          }}</router-link>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState("loginUser", { menuList: "menuList", isLoading: "isLoading" }),
  },
  created() {
    console.log(this.menuList);
  },
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.nav-title {
  & /deep/ i {
    color: rgb(12, 1, 1);
  }
  .el-menu-item {
    color: rgb(228, 146, 146);
  }
}
</style>